<template>
  <div class="backRegister">
    <div class="login_box">
      <div class="header">
        <img src="@/assets/login-bg.png" alt/>
      </div>
      <div class="title">用户注册</div>
      <!--div class="box-content">
          <div>
            <input class="myinput" type="text" placeholder="手机号/用户名" v-model="username"/>
          </div>
          <div>
            <input @keyup.13="login" class="myinput" type="password" placeholder="口令" v-model="password"/>
          </div>
          <div>
            <input @keyup.13="login" class="myinput" type="password" placeholder="重复口令"/>
          </div>
          <div>
            <input class="account" type="text" placeholder="账号" v-model="account"/>
          </div>
          <div>
            <input class="collegeId" type="text" placeholder="学院" v-model="collegeId"/>
          </div>
          <div>
            <input class="identity" type="text" placeholder="用户身份" v-model="identity"/>
          </div>
          <div>
            <input class="realName" type="text" placeholder="真实姓名" v-model="realName"/>
          </div>
          <div>
            <input class="tel" type="text" placeholder="电话" v-model="tel"/>
          </div>

          <div class="login_other"></div>
          <button :disabled="disablebtn" class="login" @click="addRegister">{{ registerText }}</button>
      </div-->

      <div class="box-content">
        <el-form  class="form" ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px"
                style="width: 400px; margin-left:50px;"
        >
          <el-form-item label="账号" prop="account">
            <el-input v-model="temp.account"/>
          </el-form-item>

          <el-form-item label="用户昵称" prop="username">
            <el-input v-model="temp.username"/>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="temp.password"/>
          </el-form-item>

          <el-form-item label="所属学院" prop="collegeId" class="left1">
            <el-select v-model="temp.collegeId" placeholder="请选择所在学院" clearable class="filter-item">
              <el-option v-for="item in collegeId" :key="item.id" :label="item.college" :value="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item label="用户身份" prop="identity" class="left2">
            <el-select v-model="temp.identity" placeholder="请选择所在学院" clearable class="filter-item">
              <el-option v-for="item in identity" :key="item.code" :label="item.des" :value="item.code"/>
            </el-select>
          </el-form-item>

          <el-form-item label="用户类型" prop="userType">
            <el-input v-model="temp.userType"/>
          </el-form-item>

          <el-form-item label="电话" prop="tel">
            <el-input v-model="temp.tel"/>
          </el-form-item>

        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
import requests from '@/api/request'

export default {
  name: 'Register',
  data() {
    return {
      // username: 'CJohnSnow' /*TODO:先预存测试值，以免手动输入*/,
      // password: '123456',
      disablebtn: false,
      registerText: '点击注册',
      goodsId: '',
      account: '',
      collegeId: '',
      identity: '',
      password: '',
      realName: '',
      tel: '',
      userType: '',
      username: '',
      temp: {
        id: undefined,
        collegeId: undefined,
        account: undefined,
        identity: undefined,
        realName: undefined,
        tel: undefined,
        userType: undefined,
        username: undefined
      },
      rules: {
        account: [{ required: true, message: '账号不能为空', trigger: 'change' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'change' }],
        userType: [{ required: true, message: '用户类型不能为空', trigger: 'change' }]
      },
      collegeId: {
        gis:{
          id:5,
          college:"地理与信息工程学院"
        },
        cs:{
          id:4,
          college:"计算机学院"
        },
        artistic:{
          id:3,
          college:"艺术与传媒学院"
        },
        mechanical:{
          id:2,
          college:"机电学院"
        },
        material:{
          id:1,
          college:"材料与化学学院"
        }
      },
      identity: {
        student: {
          des: "学生",
          code: 0
        },
        teacher: {
          des: "老师",
          code: 1
        }
      },
      college: undefined,
    }
  },
  methods: {
    login() {
      this.disablebtn = true
      this.registerText = '请求中...'
      this.$router.push({path: '/login'})
    },
    addRegister() {
      requests({
        url: '/user',
        method: 'post',
        data: {
          'goodsId': this.goodsId,
          "account": this.account,
          "collegeId": this.collegeId,
          "identity": this.identity,
          "password": this.password,
          "realName": this.realName,
          "tel": this.tel,
          "userType": this.userType,
          "username": this.username
        }
      }).then((response) => {
        console.log(response)
      }).catch(err => {
        console.log(err)
      })
    },

  },
  created() {
    // 显示登录链接 隐藏注册链接
    this.$store.commit('header/SHOW_LOGIN_LINK', true)
    this.$store.commit('header/SHOW_REGISTER_LINK', false)
    this.$store.commit('header/SHOW_LOGOUT_LINK', false)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.backRegister {
  /* margin: 50px auto;
    max-width: 580px;
    max-height: 320px; */
  height: 100%;
  background: url(../../assets/bg.png) no-repeat center/100%;
  overflow: hidden;
}

.header {
  height: 120px;
  margin-bottom: 0px;
  margin-left: 275px;
}

.header img {
  width: 66px;
  height: 60px;
  border: 1px solid gray;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(13, 62, 73, 0.2);
  padding: 2px;
}

.header img:hover {
  animation: ImgScale 1.2s ease;
}

@keyframes ImgScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.header span {
  float: left;
  color: #566a80;
  margin: 21px 0 0 20px;
}


.box-content {
  padding: 12px;
  box-shadow: 0 1px 5px rgba(13, 62, 73, 0.2);
  border-radius:15px;
  background-color: rgba(211, 207, 207,0.8);
  width: 550px;
  margin-left: 25px;
}
.form {
  width: 400px;
  margin-left: 75px;
  margin-top: 20px;
}


.login_box {
  width: 320px;
  margin: 50px auto;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  margin-left: 650px;
}

.login_box .myinput {
  width: 100%;
  border: 1px solid #cad3de;
  height: 40px;
  line-height: 40px;
  margin: 5px 0 10px;
  border-radius: 3px;
  padding: 0 10px;
  outline: none;
  box-sizing: border-box;
}

.login_box .account {
  width: 100%;
  border: 1px solid #cad3de;
  height: 40px;
  line-height: 40px;
  margin: 5px 0 10px;
  border-radius: 3px;
  padding: 0 10px;
  outline: none;
  box-sizing: border-box;
}

.login_box .collegeId {
  width: 100%;
  border: 1px solid #cad3de;
  height: 40px;
  line-height: 40px;
  margin: 5px 0 10px;
  border-radius: 3px;
  padding: 0 10px;
  outline: none;
  box-sizing: border-box;
}

.login_box .identity {
  width: 100%;
  border: 1px solid #cad3de;
  height: 40px;
  line-height: 40px;
  margin: 5px 0 10px;
  border-radius: 3px;
  padding: 0 10px;
  outline: none;
  box-sizing: border-box;
}

.login_box .realName {
  width: 100%;
  border: 1px solid #cad3de;
  height: 40px;
  line-height: 40px;
  margin: 5px 0 10px;
  border-radius: 3px;
  padding: 0 10px;
  outline: none;
  box-sizing: border-box;
}

.login_box .tel {
  width: 100%;
  border: 1px solid #cad3de;
  height: 40px;
  line-height: 40px;
  margin: 5px 0 10px;
  border-radius: 3px;
  padding: 0 10px;
  outline: none;
  box-sizing: border-box;
}

.login_box .userType {
  width: 100%;
  border: 1px solid #cad3de;
  height: 40px;
  line-height: 40px;
  margin: 5px 0 10px;
  border-radius: 3px;
  padding: 0 10px;
  outline: none;
  box-sizing: border-box;
}

.login_box .myinput:focus {
  border: 1px solid #4289dc;
}

.login_other {
  overflow: hidden;
}

.login_other a {
  float: right;
  color: #727f8f;
}

.login_other a:hover {
  color: #273444;
}

.login_other input,
.login_other label {
  float: left;
  color: #727f8f;
}

.login_other input {
  margin: 4px 5px 0 0;
}

.login {
  box-sizing: border-box;
  border: none 0;
  height: 44px;
  line-height: 44px;
  width: 100%;
  background: #4187db;
  font-size: 16px;
  border-radius: 3px;
  margin-right: 40px;
  transition: all 0.5s ease;
  cursor: pointer;
  outline: none;
  color: #fff;
  margin-top: 15px;
}

.login:hover {
  background: #2668b5;
}

.login[disabled] {
  opacity: 0.8;
}

.login[disabled]:hover {
  background: #4187db;
}
.left1 {
  text-align: left
}
.left2 {
  text-align: left
}

.title {
  position: absolute;
  z-index: 999;
  color: #ffffff;
  font-size: 2em;
  text-align: right;
  top: 190px;
  left: 905px;
}

@media only screen and (max-width: 768px) {
  .login_box {
    width: 280px;
    margin: 50px auto;
  }
}
</style>
